<template>
	<view 
		class="back-to-top" 
		:class="{ 'show': showBackTop }" 
		@click="scrollToTop"
		v-if="showBackTop"
	>
		<view class="back-icon">
			<text class="iconfont icon-xiangshang"></text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BackToTop',
	props: {
		// 显示回到顶部按钮的滚动距离阈值
		threshold: {
			type: Number,
			default: 300
		},
		// 当前滚动位置
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			showBackTop: false
		}
	},
	watch: {
		scrollTop(newVal) {
			// 根据滚动位置决定是否显示回到顶部按钮
			this.showBackTop = newVal > this.threshold;
      // console.log("showBackTop",this.showBackTop)
		}
	},
	methods: {
		scrollToTop() {
			// 回到顶部的方法，兼容各平台
			// #ifdef H5
			// H5平台使用原生方法
			window.scrollTo({
				top: 0,
				behavior: 'smooth'
			});
			// #endif
			
			// #ifdef MP || APP-PLUS
			// 小程序和APP使用uni.pageScrollTo
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			// #endif
			
			// 触发点击事件，可供父组件监听
			this.$emit('click');
		}
	}
}
</script>

<style lang="scss" scoped>
.back-to-top {
	position: fixed;
	right: 30rpx;
	bottom: 220rpx;
	width: 80rpx;
	height: 80rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s ease;
	
	/* 兼容不同平台的安全区域 */
	/* #ifdef APP-PLUS */
	bottom: calc(220rpx + env(safe-area-inset-bottom));
	/* #endif */
	
	/* #ifdef H5 */
	bottom: 220rpx;
	/* #endif */
	
	&.show {
		opacity: 1;
		transform: scale(1);
	}
	
	&:active {
		transform: scale(0.9);
		background: rgba(0, 0, 0, 0.8);
	}
	
	.back-icon {
		color: #fff;
		font-size: 32rpx;
		
		.iconfont {
			font-size: 32rpx;
		}
	}
}

/* 如果没有iconfont，使用CSS绘制箭头 */
// .back-to-top .back-icon::before {
// 	content: "↑";
// 	font-size: 32rpx;
// 	font-weight: bold;
// }

/* 当有iconfont时隐藏默认箭头 */
.back-to-top .back-icon .iconfont + * {
	display: none;
}
</style>
